<template>
  <div class="container">
    <div class="nav-bar">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container-main">
      <Search
        :searchList='searchList'
        size="small"
        otherText="新增会员"
        other
        @other="commonHandle({type: 'add'})"
        @search="searchHandle('search', $event)"
        @refresh="searchHandle('refresh', $event)"
      />
      <div class="main-table">
        <el-table :data="tableData" border style="width: 100%" size="small" v-loading="tableLoading">
          <el-table-column prop="id" label="会员ID" min-width="200" />
          <el-table-column prop="realName" label="会员姓名" min-width="200" />
          <el-table-column prop="name" label="会员昵称" min-width="200" />
          <el-table-column prop="headPortraitUrl" label="会员头像" min-width="200" >
            <template slot-scope="{row}">
              <img :src="row.headPortraitUrl" alt="" style="width:100px;height:100px" v-if="row.headPortraitUrl">
              <span v-else>暂无图片</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="phone" label="登录手机" min-width="200" /> -->
          <el-table-column prop="telephone" label="手机号" min-width="200" />
          <!-- <el-table-column prop="password" label="会员密码" min-width="200" /> -->
          <el-table-column prop="qq" label="会员QQ" min-width="200" />
          <el-table-column prop="vxNo" label="会员微信" min-width="200" />
          <el-table-column prop="workYear" label="工作年限" min-width="200" />
          <el-table-column label="所属行业" min-width="200" >
            <template slot-scope="{row}">
              <div>{{row.classificationId | formatHY(dataType.hangyeList)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型（擅长领域、技术语言）" min-width="200" />
          <el-table-column prop="idCarno" label="身份证号" min-width="200" />
          <el-table-column prop="imgIdcarFront" label="身份证正面" min-width="200" >
            <template slot-scope="{row}">
              <img :src="row.imgIdcarFront" alt="" style="width:100px;height:100px" v-if="row.imgIdcarFront">
              <span v-else>暂无图片</span>
            </template>
          </el-table-column>
          <el-table-column prop="imgIdcarBack" label="身份证反面" min-width="200" >
            <template slot-scope="{row}">
              <img :src="row.imgIdcarBack" alt="" style="width:100px;height:100px" v-if="row.imgIdcarBack">
              <span v-else>暂无图片</span>
            </template>
          </el-table-column>
          <el-table-column label="实名认证" min-width="200" >
            <template slot-scope="{row}">
              <div>{{row.realState == 1 ? '已实名' : '未实名' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="技术等级" min-width="200" >
            <template slot-scope="{row}">
              <div>{{row.level | formatDictionary(dataType.levelList)}}</div>
            </template>
          </el-table-column>
          <el-table-column label="会员类型" min-width="200" >
            <template slot-scope="{row}">
              <div>{{row.memberType | formatDictionary(dataType.memberTypeList)}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="200"
            fixed="right" >
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="commonHandle({type: 'see', item: row})">查看</el-button>
              <el-button type="text" size="small" @click="commonHandle({type: 'edit', item: row})">编辑</el-button>
              <el-button type="text" size="small" @click="commonHandle({type: 'delete', item: row})">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main-page">
        <el-pagination
          background
          :page-size="10"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="totalPage" />
      </div>
    </div>

    <el-dialog :title="handleType == 'add' ? '添加会员' :  handleType == 'see' ? '查看会员' : '修改会员'" :visible.sync="handleDialog" top="5vh">
      <div style="max-height: 400px; overflow: scroll;">
        <el-form ref="submitForm" :model="formData" label-width="120px" :rules="rules">
          <el-form-item label="会员姓名" prop="realName">
            <el-input v-model="formData.realName" size="mini" :disabled="handleType == 'see'" :maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="所在省份" prop="province">
            <el-select v-model="formData.province" placeholder="请选择" size="mini" :disabled="handleType == 'see'">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in dataType.areaList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员昵称" prop="name">
            <el-input v-model="formData.name" size="mini" :disabled="handleType == 'see'"  :maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="会员头像" prop="headPortraitUrl">
            <el-input v-model="formData.headPortraitUrl" size="mini" :disabled="handleType == 'see'" :maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model="formData.telephone" size="mini" :disabled="handleType == 'see'" :maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="会员QQ" prop="qq">
            <el-input v-model="formData.qq" size="mini" :disabled="handleType == 'see'" :maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="会员微信" prop="vxNo">
            <el-input v-model="formData.vxNo" size="mini" :disabled="handleType == 'see'" :maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="个人简介" prop="personalProfile">
            <el-input v-model="formData.personalProfile" size="mini" :disabled="handleType == 'see'" :maxlength="200" type="textarea" :rows="5"></el-input>
          </el-form-item>
          <el-form-item label="浏览量" prop="showNum">
            <el-input v-model="formData.showNum" size="mini" :disabled="handleType == 'see'" :maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="工作年限" prop="workYear">
            <el-input v-model="formData.workYear" size="mini" :disabled="handleType == 'see'" :maxlength="2"></el-input>
          </el-form-item>
          <el-form-item label="所属行业" prop="classificationId">
            <el-select v-model="formData.classificationId" placeholder="请选择" size="mini" :disabled="handleType == 'see'">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in dataType.hangyeList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="类型（擅长领域、技术语言）" prop="type">
            <el-input v-model="formData.type" size="mini" :disabled="handleType == 'see'"></el-input>
          </el-form-item> -->
          <el-form-item label="身份证号" prop="idCarno">
            <el-input v-model="formData.idCarno" size="mini" :disabled="handleType == 'see'" :maxlength="18"></el-input>
          </el-form-item>
          <el-form-item label="身份证正面" prop="imgIdcarFront">
            <UploadFile :filesList="formData.imgIdcarFront" @change="getFile('imgIdcarFront', $event)" @delete="deleteFile('imgIdcarFront', $event)" :max="1" :formType="handleType"/>
          </el-form-item>
          <el-form-item label="身份证反面" prop="imgIdcarBack">
            <UploadFile :filesList="formData.imgIdcarBack" @change="getFile('imgIdcarBack', $event)" @delete="deleteFile('imgIdcarBack', $event)" :max="1" :formType="handleType"/>
          </el-form-item>
          <el-form-item label="实名认证" prop="realState">
            <el-select v-model="formData.realState" placeholder="请选择" size="mini" :disabled="handleType == 'see'">
              <el-option label="已实名" value="1"></el-option>
              <el-option label="未实名" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="技术等级" prop="level">
            <el-select v-model="formData.level" placeholder="请选择分类" size="mini" :disabled="handleType == 'see'">
              <el-option :label="item.name" :value="item.code" v-for="(item, index) in dataType.levelList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否驻场" prop="onSite">
            <el-select v-model="formData.onSite" placeholder="请选择" size="mini" :disabled="handleType == 'see'">
              <el-option :label="item.name" :value="item.code" v-for="(item, index) in dataType.ifOrNotList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员类型" prop="memberType">
            <el-select v-model="formData.memberType" placeholder="请选择" size="mini" :disabled="handleType == 'see'">
              <el-option :label="item.name" :value="item.code" v-for="(item, index) in dataType.memberTypeList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="formData.remarks" size="mini" :disabled="handleType == 'see'" :maxlength="200" type="textarea" :rows="5"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" v-if="handleType != 'see'">
        <el-button @click="handleDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitHandle()" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Search from '../../components/Common/Search'
export default {
  created() {
    this._getPage()
    this._getHangyeData()
    this._getDatatypeList('levelList', 87)
    this._getDatatypeList('memberTypeList', 88)
    this._getDatatypeList('areaList', 91)
    this._getDatatypeList('ifOrNotList', 96)
  },
  data() {
    return {
      searchList: [
        { value: '', key: 'realName', type: 'input', placeholder: '请输入会员姓名' },
        { value: '', key: 'telephone', type: 'input', placeholder: '会员手机号' },
      ],
      searchForm: {},
      tableData: [],
      tableLoading: false,
      currentPage: 1,
      totalPage: 0,
      handleType: 'see',
      formData: {},
      currentHandleId: '',
      handleDialog: false,
      rules: {
        // realName: [
        //     { required: true, message: '请输入会员姓名', trigger: 'blur' },
        // ],
        // name: [
        //     { required: true, message: '请输入会员昵称', trigger: 'blur' },
        // ],
        // headPortraitUrl: [
        //     { required: true, message: '请输入会员头像', trigger: 'blur' },
        // ],
        telephone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { validator: this.$formValidate.phoneValidator, message: '请输入正确的手机号' }
        ],
        qq: [
            // { required: true, message: '请输入会员QQ', trigger: 'blur' },
            { validator: this.$formValidate.qqValidator, message: '请输入正确的QQ号' }
        ],
        vxNo: [
            // { required: true, message: '请输入会员微信', trigger: 'blur' },
            { validator: this.$formValidate.wxValidator, message: '请输入正确的微信号' }
        ],
        // workYear: [
        //     { required: true, message: '请输入工作年限', trigger: 'blur' },
        // ],
        // classificationId: [
        //     { required: true, message: '选择所属行业', trigger: 'blur' },
        // ],
        // type: [
        //     { required: true, message: '请输入类型（擅长领域、技术语言）', trigger: 'blur' },
        // ],
        idCarno: [
            { message: '请输入身份证号', trigger: 'blur' },
            { validator: this.$formValidate.idcardValidator, message: '请输入正确的身份证号' }
        ],
        // imgIdcarFront: [
        //     { required: true, message: '请上传身份证正面', trigger: 'blur' },
        // ],
        // imgIdcarBack: [
        //     { required: true, message: '请上传身份证反面', trigger: 'blur' },
        // ],
        // realState: [
        //     { required: true, message: '请选择实名认证情况', trigger: 'change' },
        // ],
        // level: [
        //     { required: true, message: '请选择技术等级', trigger: 'change' },
        // ],
        // memberType: [
        //     { required: true, message: '请选择会员类型', trigger: 'change' },
        // ],
      }
    }
  },

  components: {
    Search
  },

  computed: {},

  watch: {

  },

  methods: {
    getFile (target, file) {
      this.formData[target].push(file)
    },
    deleteFile(target, { item, index }) {
      this.formData[target].splice(index, 1)
    },
    commonHandle({ type, item }) {
      this.handleType = type
      if (type === 'edit' || type === 'see') {
        this.handleDialog = true
        this.currentHandleId = item.id
        this._loadById(item.id)
      } else if (type === 'delete') {
        this._deleteById(item.id)
      } else if (type === 'add') {
        this.handleDialog = true
        this.formData = {
          imgIdcarFront: [],
          imgIdcarBack: [],
        }
      }
    },
    searchHandle(type, form) {
      this.searchForm = form
      if (type === 'search') {
        this._getPage(form)
      } else if (type === 'refresh') {
        this._getPage()
        this.searchList.forEach(item => {
          item.value = ''
        })
      }
    },
     // 删除单个会员
    _deleteById(id) {
      this.$confirm(`您真的要删除此会员吗`, `温馨提示`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$api.memberInfoDelete(id)
          .then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this._getPage()
            } else {
              this.$message.warning(res.text || '服务器出现错误')
            }
          })
      })
    },
    // 新增/修改会员提交
    submitHandle() {
      this.$refs['submitForm'].validate((valid) => {
        if (valid) {
          let API = 'memberInfoUpdate'
          if (this.handleType === 'add') {
            API = 'memberInfoCreate'
          }

          const [imgIdcarFront] = this.formData.imgIdcarFront.map(item => {
            return item.url || ''
          })
          const [imgIdcarBack] = this.formData.imgIdcarBack.map(item => {
            return item.url || ''
          })

          const data = {
            ...this.formData,
            imgIdcarFront,
            imgIdcarBack
          }

          this.$api[API](data, this.currentHandleId).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this._getPage()
              this.handleDialog = false
            } else {
              this.$message({
                message: res.text,
                type: 'warning'
              })
            }
          })
        }
      })
    },
    // 获取会员列表
    async _getPage(form = {}) {
      this.tableLoading = true
      const res = await this.$api.memberInfoPage({
        page: this.currentPage,
        size: 5,
        ...form
      })

      this.tableLoading = false
      if (res.code === 200) {
        this.tableData = res.data.rows
        this.totalPage = +res.data.total
      }
    },
    // 获取某个会员信息
    async _loadById(id) {
      const res = await this.$api.memberInfoLoad(id)
      if (res.code === 200) {
        this.formData = res.data
        this.formData.imgIdcarFront = [
          {
            filename: '身份证正面',
            url: this.formData.imgIdcarFront
          }
        ]
        this.formData.imgIdcarBack = [
          {
            filename: '身份证反面',
            url: this.formData.imgIdcarBack
          }
        ]
      }
    },
  }
}
</script>
<style lang='scss' scoped>
</style>
